<template>
  <div>
    <!-- 新增版本表单 -->
    <el-form
      :model="versionForm"
      :rules="rules"
      ref="versionForm"
      label-width="120px"
      class="versionForm"
    >
      <!-- 基本信息 -->
      <el-row>
        <p class="ptitle">基本信息</p>
        <!-- left -->
        <el-col :span="8">
          <!-- 版本名称 -->
          <el-form-item label="版本名称" prop="name">
            <el-input
              v-model="versionForm.name"
              placeholder="请输入版本名称"
            ></el-input>
          </el-form-item>
          <!-- 版本号 -->
          <el-form-item label="版本号" prop="number" required>
            <el-input
              v-model="versionForm.number"
              placeholder="请输入文章来源"
            ></el-input>
          </el-form-item>
          <!-- 更新描述 -->
          <el-form-item label="更新描述" required>
            <el-input
              type="textarea"
              v-model="versionForm.updateDesc"
              placeholder="更新描述"
              prop="updateDesc"
            ></el-input>
          </el-form-item>
        </el-col>
        <!-- right -->
        <el-col :span="8" :offset="2">
          <!-- 平台 -->
          <el-form-item label="平台" prop="platform" required>
            <el-select v-model="versionForm.platform">
              <el-option
                v-for="item in platformTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 更新时间 -->
          <el-form-item label="更新时间" prop="expireTime" required>
            <el-date-picker
              v-model="versionForm.expireTime"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 安装包 -->
      <el-row>
        <p class="ptitle">安装包升级</p>
        <el-col :span="8">
          <el-form-item label="官方包" prop="uploadOffice" required>
            <el-upload
              class="upload-demo"
              drag
              :limit="1"
              accept='.apk'
              action="/oss/service/file/upload"
              multiple
              :on-success="upLoadSucessOffice"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="应用宝安装包" prop="uploadApplication" required>
            <el-upload
              class="upload-demo"
              drag
              :limit="1"
              accept='.apk'
              action="/oss/service/file/upload"
              multiple
              :on-success="upLoadSucessApplication"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="安装包渠道1" prop="uploadone" required>
            <el-upload
              class="upload-demo"
              drag
              :limit="1"
              accept='.apk'
              action="/oss/service/file/upload"
              multiple
              :on-success="upLoadSucessOne"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="安装包渠道2" prop="uploadTwo" required>
            <el-upload
              class="upload-demo"
              drag
              :limit="1"
              accept='.apk'
              action="/oss/service/file/upload"
              multiple
              :on-success="upLoadSucessTwo"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 提交返回 -->
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm('versionForm')"
          class="uploadButton"
          >上传
          <i class="el-icon-upload el-icon--right"></i>
        </el-button>
        <el-button @click="resetForm('versionForm')" class="uploadButton"
          >返回</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { insertHandler } from "../../http/content";
export default {
  data() {
    // 跳转连接正则
    var jumpUrl = (rule, value, callback) => {
      let articalUrlReg = /\/artical\/\d+$/g;
      if (value == "") {
        callback(new Error("请输入跳转url"));
      } else if (!articalUrlReg.test(value) && value != "") {
        callback(new Error("请输入正确的跳转url"));
      } else {
        callback();
      }
    };
    var Vsort = (rule, value, callback) => {
      let sortReg = /^\d+$/g;
      if (value == "") {
        callback(new Error("请输入正整数"));
      } else if (!sortReg.test(value) && value != "") {
        callback(new Error("请输入正确的正整数"));
      } else {
        callback();
      }
    };
    //排序正则
    return {
      radio: true,
      editorOption: {},
      //编辑文章分类
      platformTypes: [
        //平台分类
        {
          value: "Android",
          label: "Android",
        },
        {
          value: "iOS",
          label: "iOS",
        },
      ],
      //启用状态
      editShelfStatus: [
        {
          value: true,
          label: "启用",
        },
        {
          value: false,
          label: "禁用",
        },
      ],
      versionForm: {
        name: "", //版本名称
        updateDesc: "", //更新描述
        platform: "iOS", //系统
        expireTime: "", //添加时间
        inEffective: true, //是否有效
        number: "", //版本号
        uploadApplication: "", //安装报地址
        uploadone: "", //安装包渠道1
        uploadTwo: "", //安装包渠道2
        uploadOffice: "", //官方渠道
      },
      rules: {
        name: [
          { required: true, message: "请输入标题", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        Url: [{ validator: jumpUrl, trigger: "blur" }],
        sort: [
          { min: 1, max: 5, message: "长度在 1 到 10 个字符", trigger: "blur" },
          { validator: Vsort, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //文件上传
    upLoadSucessOffice(response) {
      this.versionForm.uploadOffice = response.data.fileUrl;
    },
     upLoadSucessApplication(response) {
      this.versionForm.uploadApplication = response.data.fileUrl;
    },
     upLoadSucessOne(response) {
      this.versionForm.uploadone = response.data.fileUrl;
    },
     upLoadSucessTwo(response) {
      this.versionForm.uploadTwo = response.data.fileUrl;
    },
    //提交新增文章
    submitForm(formName) {
        console.log(this.versionForm,'新增版本数据');
        this.$refs[formName].validate((valid) => {
            let path = '/version/insert';
            if (valid) {
                insertHandler(path,this.versionForm)
                    .then((res) => {
                    if(res.data.code != 20000){
                        return this.$message.error(res);
                    }
                    this.$message.success('添加成功');
                    this.versionDialogStatus = false;
                    this.$router.push('/content/version');
                    })
                    .catch((err) => {
                        this.$message.error(err);
                        console.log(err);
                    });
                } else {
                this.$message.error('提交内容不能为空');
                    console.log(234);
                    return false;
                }
        });
    },
    //重置新增文章
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$router.push("/content/version");
    },
  },
};
</script>
<style lang="less">
    .el-form .el-select {
        width: 100%;
    }
    .ptitle {
        margin: 10px 0px 20px 0px;
        font-size: 20px;
    }
    .uploadButton {
        margin-right: 30px;
        width: 200px;
        height: 60px;
    }
    .up {
        margin-top: 200px;
    }
    .versionForm {
        padding: 50px;
    }
</style>
